<template>
  <div class="app-container">

    <h2 style="text-align: center;">发布新课程</h2>

    <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="发布课程"/>
    </el-steps>

    <el-form label-width="120px">

   <el-form-item label="课程标题">
    <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"/>
  </el-form-item> 

    <!-- 所属分类 -->
    <!-- 一级分类 -->
     <el-form-item label="课程分类">
        <el-select
            v-model="courseInfo.subjectParentId"
            placeholder="请选择课程分类" @change="subjectLevelOnChange">

            <el-option
                v-for="subject in firstSubjectList"
                :key="subject.id"
                :label="subject.title"
                :value="subject.id"/>
        </el-select>
         <!-- 二级分类 -->
        <el-select v-model="courseInfo.subjectId" placeholder="请选择课程">
            <el-option
                v-for="subject in secondSubjectList"
                :key="subject.id"
                :label="subject.title"
                :value="subject.id"/>
            </el-select>
    </el-form-item>

   


  <!-- 课程讲师 -->
    <el-form-item label="课程讲师">
    <el-select
        v-model="courseInfo.teacherId"
        placeholder="请选择讲师">
        <el-option
        v-for="teacher in teacherList"
        :key="teacher.id"
        :label="teacher.name"
        :value="teacher.id"/>
    </el-select>
    </el-form-item>


  <el-form-item label="总课时">
    <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数"/>
  </el-form-item>

  <!-- 课程简介 TODO -->
  <el-form-item label="课程简介">
      <tinymce :height="300" v-model="courseInfo.description"/>
  </el-form-item>

  <!-- 课程封面 TODO -->
  <el-form-item label="课程封面">
    <el-upload
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :action="BASE_API+'/eduoss/fileoss'"
      class="avatar-uploader">
      <img :src="courseInfo.cover">
    </el-upload>
</el-form-item>

  <el-form-item label="课程价格">
    <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="免费课程请设置为0元"/> 元
  </el-form-item>

  <el-form-item>
    <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
  </el-form-item>
</el-form>
  </div>
</template>
<script>
    import course from '@/api/edu/course'
    import subject from '@/api/edu/subject'
    import Tinymce from '@/components/Tinymce'

    export default {
        // 声明组件
        components:{Tinymce},
        data(){
            return {
                courseInfo:{
                    id:'',
                    title: '',
                    subjectId: '', //二级分类id
                    subjectParentId:'', //一级分类id
                    teacherId: '',
                    lessonNum: 0,
                    description: '',
                    cover: 'https://moster0506.oss-cn-shanghai.aliyuncs.com/2020/05/17/ec687d5de2624d07a96bded1f8daadb32020040114082847583.jpg',
                    price: 0.0
                },
                saveBtnDisabled:false, // 保存按钮禁用
                cId:'' ,// 1.收集添加过课程的id。2.获取上一步跳转路由中携带的 课程id
                teacherList:[] , // 讲师集合
                firstSubjectList:[], // 一级分类数组
                secondSubjectList:[], // 二级分类数组
                BASE_API:process.env.BASE_API // 声明全局设置的请求路径: nginx路径
            }
        },
        created(){
          
            // 获取路由中的课程id
            // 判断路由中是否有 课程id。有值，说明是点击上一步来到当前页面。没有值说明是第一次进入添加课程界面。此时不需要回显课程
            if(this.$route.params && this.$route.params.id){
              // 将路由中获取的id 赋值给当前vue对象的cId。
                this.cId=this.$route.params.id;

                // 调用方法 进行回显课程操作
                this.echoCourseInfo(this.cId);

            }else{
                 // 初始化 一级分类下拉列表
                 this.getFirstSubjectList();
            }
            //初始化讲师下拉列表
            this.getTeacherList();
        },
         // 监听
        watch:{
          // 解决 created()只会执行一次。无法初始化页码bug
          $route(to,from){ // 获取路由变化的方式

              // 判断 路由是否携带课程 id
               if( !(this.$route.params && this.$route.params.id) ){
                  //当路由中没有课程id时。为首次添加课程。将之前的课程表单信息置空
                  this.resetForm();
              }
          }
        },
        methods:{
            // 点击下一步回调
            saveOrUpdate(){
                // 判断当前操作是 添加还是修改 。可以根据 courseInfo.id判断。id有值为修改。无值为添加
                if(this.courseInfo.id){
                  //alert(this.courseInfo.id);
                  // 修改
                  this.editCourseInfo(this.courseInfo);
                }else{
                   //alert(this.courseInfo.id);
                  // 添加
                  this.addCourse(this.courseInfo);
                }
            },

            // 调用 api接口 查询所有 讲师集合
            getTeacherList(){
                course.getTeacherList()
                    .then(response =>{
                        this.teacherList=response.data.teacherList;
                    });
            },

            // 查询一级分类
            getFirstSubjectList(){
                subject.getSubjectTree()
                    .then(response =>{
                        // 赋值给当前 一级分类集合
                        this.firstSubjectList = response.data.treeList;
                });
            },

            // 当一级分类被选择后的 回调函数
            subjectLevelOnChange(value){
                // value就是 一级分类的 id
                // 遍历 firstSubjectList集合，里面包含 一级、二级分类

                for(var i = 0;i< this.firstSubjectList.length;i++){
                    var subject = this.firstSubjectList[i];

                    if(subject.id === value){
                          // 将当前对应的一级分类下的二级赋值给 vue对象
                          this.secondSubjectList = subject.children;
                          // 每次选中一级分类将上次的二级分类id置空，
                          this.courseInfo.subjectId='';
                    }
                }
            },
            // 课程图片上传成功 回调
            handleAvatarSuccess(res,file){
                //  将上传的 图片地址赋值给 courseInfo中 cover属性
                this.courseInfo.cover = res.data.varatarUrl;
            },
            // 课程图片上传之前 回调
            beforeAvatarUpload(file){
                // 判断上传图片的类型、大小
                const imgType = file.type === 'image/jpeg'; // 图片类型限制
                const imgSize2m = file.size / 1024 / 1024 < 2; // 大小限制

                if(!imgType){
                    this.$message.console.error('上传图片只能是 jpg格式');
                }
                if(!imgSize2m){
                    this.$message.console.error('上传图片不能超过 2m');
                }
              return imgType && imgSize2m;
            },
            // 根据路由中的id值  回显 课件信息
            echoCourseInfo(courseId){
                course.getCourseById(courseId)
                  .then(response =>{
                    // 将课程信息回显 ，包含一级id，二级id
                    this.courseInfo  = response.data.courseVO;

                    // 调用api获取所有一级菜单
                    subject.getSubjectTree()
                      .then(response =>{
                          this.firstSubjectList = response.data.treeList;

                          // 遍历一级分类。找到回显课程中选择的一级分类
                          for(var i = 0;i<this.firstSubjectList.length;i++){
                            // 获取每一个 一级分类
                            var subjectParent =this.firstSubjectList[i];

                            // 判断当前一级列表中的id 是否对应回显课程中选择的一级菜单id值
                            if(subjectParent.id === this.courseInfo.subjectParentId){

                                // 将对应的一级列表下的二级列表回显,回显二级列表的回显
                                this.secondSubjectList = subjectParent.children;
                            }
                          } 
                      });
                  });
            },
            // 修改 课程信息
            editCourseInfo(courseInfo){
                course.editCourseInfo(courseInfo)
                .then(response =>{
                  // 提示添加成功
                      this.$message({
                          type:'success',
                          message:'修改课程基本信息成功'
                     });
                  // 调换到第二步,通过路由
                  this.$router.push({path:'/course/chapter/'+this.courseInfo.id});
              });
            },
            // 添加课程
            addCourse(){
                // 添加课程基本信息
                course.saveCourse(this.courseInfo)
                    .then(response => {
                        // 提示添加成功
                        this.$message({
                            type:'success',
                            message:'添加课程基本信息成功'
                        });
                        //获取添加课程的id
                        this.cId = response.data.cId;
                        // 调换到第二步,通过路由
                        this.$router.push({path:'/course/chapter/'+this.cId});
                });
            },
            // 清空表单
            resetForm(){
               this.courseInfo = {};
               // 重新设置封面
               this.courseInfo.cover= 'https://moster0506.oss-cn-shanghai.aliyuncs.com/2020/05/17/ec687d5de2624d07a96bded1f8daadb32020040114082847583.jpg';
            }
        }
    }
</script>

// 设置 样式
<style scoped>
.tinymce-container {
  line-height: 29px;
}
</style>